<template>
  <div class="mui-content">
    <div class="mui-content" v-if="contactsList.length != 0">
      <div class="title">
        <input type="text" placeholder="请输入要搜索的名字或者手机号" v-model="HeaderTitle" @input="titleNamePhone">
        <div class="titleCentent">
          <li v-for="item in titleList" @click.prevent="getListNamePhone(item.name,item.phone)">
            <div>{{item.name}}</div>
            <div>{{item.phone}}</div>
          </li>
        </div>
      </div>
      <div class="centent">
        <div class="listArray" ref="contactsList">
          <div class="list" v-for="(item,index) in contactsList">
            <div class="header" :id="item.letter" :ref="`list${item.letter}`">{{item.letter}}</div>
            <ul>
              <li v-for="(itam,indax) in item.contacts" @click="getListNamePhone(itam.name,itam.phone)">
                <div>{{itam.name}}</div>
                <div>{{itam.phone}}</div>
              </li>
            </ul>
          </div>
        </div>
        <div class="rightList">
          <div v-for="(item,index) in contactsList" @click="letterList(index)">{{item.letter}}</div>
        </div>
      </div>
    </div>
    <div v-if="contactsList.length == 0" class="nullContacts"><i>暂无联系人，请添加联系人</i></div>
  </div>
</template>

<script>
  import pinyin from '@/viewUtils/pinyin/pinyin3.js';

  export default {
    name: "contacts",


    data() {
      return {
        HeaderTitle: null,
        titleList: [],
        contactsList: []
      }
    },
    mounted() {
      this.getContacts();
    },
    methods: {
      getListNamePhone(name, phone) {
        mui.alert("姓名：" + name + "\n手机号：" + phone,
          "当前选择的联系人", "", "", "div");
      },
      letterList(index) {
        var letter = this.contactsList[index].letter;
        var translateY = this.$refs[`list${letter}`][0].offsetTop;
        this.$refs.contactsList.scrollTop = translateY;
      },
      titleNamePhone() {
        if (!this.HeaderTitle) {
          this.titleList = [];
        } else {
          this.titleList = [];
          for (let i = 0; i < this.contactsList.length; i++) {
            for (let j = 0; j < this.contactsList[i].contacts.length; j++) {
              if (/(^[\-0-9][0-9]*(.[0-9]+)?)$/.test(this.HeaderTitle) && this.HeaderTitle.length >= 3 &&
                this.contactsList[i].contacts[j].phone.indexOf(this.HeaderTitle) != -1 &&
                this.titleList.indexOf(this.contactsList[i].contacts[j]) == -1) {
                //是数字并且长度大于或者等于3 获取有关input输入的 对象，并且新的数组没有出现过
                this.titleList = this.titleList.concat(this.contactsList[i].contacts[j]);  //添加到新的数组
              } else {  //中文 并且新的数组没有出现过
                if (this.contactsList[i].contacts[j].name.indexOf(this.HeaderTitle) != -1 &&
                  this.titleList.indexOf(this.contactsList[i].contacts[j]) == -1) {
                  this.titleList = this.titleList.concat(this.contactsList[i].contacts[j]);//添加到新的数组
                }
              }
            }
          }
        }
      },
      getContacts() {
        // #ifdef APP-PLUS
        plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, (addressbook) => {
          // 可通过addressbook进行通讯录操作
          addressbook.find(["displayName", "phoneNumbers"], (contacts) => {
            var items = [];
            for (var i = 0; i < contacts.length; i++) {
              if (contacts[i].phoneNumbers.length > 0) {
                var contact = {
                  'name': contacts[i].displayName,
                  'phone': contacts[i].phoneNumbers[0].value
                };
                items.push(contact);
              }
            }

            this.contactsList = pinyin.paixu(items);
            // console.log(JSON.stringify(pinyin.paixu(items)));

            this.contactsList.sort(function (o1, o2) {
              return o1.letter.charCodeAt(0) - o2.letter.charCodeAt(0)
            });
          }, (e) => {
            // this.onAddressBookSetting()  //打开手机设置页面
          });
        }, (e) => {
          // this.onAddressBookSetting()  //打开手机设置页面
        });
        // #endif
      },
      onAddressBookSetting() {
        var btnArray = ['否', '是'];
        mui.confirm('APP通讯录权限没有开启，是否开启？', "提示", btnArray, function (e) {
          if (e.index == 1) {
            if (plus.os.name != 'Android') {
              var UIApplication = plus.ios.import("UIApplication");
              var NSURL2 = plus.ios.import("NSURL");
              var setting2 = NSURL2.URLWithString("app-settings:");
              var application2 = UIApplication.sharedApplication();
              application2.openURL(setting2);
              plus.ios.deleteObject(setting2);
              plus.ios.deleteObject(NSURL2);
              plus.ios.deleteObject(application2);
            } else {
              var main = plus.android.runtimeMainActivity();
              var bulid = plus.android.importClass("android.os.Build");
              var Intent = plus.android.importClass('android.content.Intent');
              if (bulid.VERSION.SDK_INT >= 9) {
                var intent = new Intent('android.settings.APPLICATION_DETAILS_SETTINGS');
                var Uri = plus.android.importClass('android.net.Uri');
                var uri = Uri.fromParts("package", main.getPackageName(), null);
                intent.setData(uri);
                intent.putExtra('android.content.Intent.setFlags', Intent.FLAG_ACTIVITY_NEW_TASK);
              } else if (bulid.VERSION.SDK_INT <= 8) {
                var intent = new Intent(Intent.ACTION_VIEW);
                intent.setClassName("com.android.settings", "com.android.settings.InstalledAppDetails");
                intent.putExtra("com.android.settings.ApplicationPkgName", main.getPackageName());
                intent.putExtra('android.content.Intent.setFlags', Intent.FLAG_ACTIVITY_NEW_TASK);
              }
              main.startActivity(intent);
            }
          } else {
            this.$router.go(-1);
          }
        }, 'div');
      }
    }
  }
</script>

<style scoped lang="scss">
  .mui-content {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: auto;
    flex-direction: column;
    justify-items: center;
    align-items: center;

    .title {
      width: 100%;
      height: 50px;
      z-index: 1;
      line-height: 50px;
      text-align: center;
      position: relative;

      input {
        width: 86%;
        height: 35px;
        font-size: 14px;
        text-align: center;
        border-radius: 10px;
        margin: 0;
      }

      .titleCentent {
        width: 86%;
        overflow: auto;
        max-height: 300px;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 45px;
        left: 7.4%;

        li {
          width: 100%;
          height: 40px;
          color: white;
          padding: 0 40px 0 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #ccc;
        }
        li:last-child {
          border: none;
        }
      }
    }

    .centent {
      flex: 1;
      width: 100%;
      overflow: auto;
      padding: 0 2px;
      position: relative;

      .listArray {
        width: 100%;
        height: 100%;
        overflow: auto;

        .header {
          width: 100%;
          height: 35px;
          line-height: 35px;
          color: #000;
          font-size: 20px;
          padding: 0 16px;
          font-weight: bold;
        }

        ul {
          width: 100%;
          background: white;
          li {
            width: 100%;
            height: 40px;
            padding: 0 40px 0 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #ccc;
          }
          li:last-child {
            border: none;
          }
        }
        .list:last-child {
          margin-bottom: 10px;
        }
      }

      .rightList {
        width: 25px;
        background: #f3f3f3;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0;
        top: 0;
        div {
          width: 100%;
          color: #000;
          font-size: 11px;
          text-align: center;
        }
      }
    }
    .nullContacts {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
    }
  }
</style>
